<template>

	<view class="flex-col page">
		 <u-sticky bgColor="#fff" style='top:0'>
		<u-tabs :current="tabsIndex" @click="click" style="background-color: #FFFFFF;" :list="list4" lineWidth="30" lineColor="#8438FC" :activeStyle="{
								color: '#8438FC',
								fontWeight: 'bold',
								transform: 'scale(1.05)'
							}" :inactiveStyle="{
								color: '#606266',
								transform: 'scale(1)'
							}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		</u-sticky>
		<view class="flex-col group">
			
			<view class="flex-col">
				<view class="flex-col group_2">
					<view class="section_3"> </view>
					<view class="flex-col list">
						<u-skeleton rows="10" :loading="loading" :title="false" rowsHeight="170"
							style="margin-top: 30rpx;">
						</u-skeleton>
						<view class="no" v-if="total === 0">
							<zNo></zNo>
						</view>
						
						
						<!-- 这是数据修改的地方 -->
						<view class="list-item flex-col" :key="i" v-for="(item, i) in dataList" @click="onClick($event,item)">
							<view class="top-section justify-between"> 
								<text class="text_7">{{ item.status_text }}</text>
								<text class="text_9">服务技术：{{ item.technician_nickname }}</text>
							</view>
							<view class="center-group flex-row">
			
								<view class="right-group flex-col">
									<view class="name-css" v-for="(a,b) in item.services">
										<text class="text_11" >{{ a.name }}</text>
										 <text style="color: #999; font-size: 26rpx;">×{{a.number}}</text>
									</view>
									<text class="text_13">服务时间：{{ item.appointment_time }}</text>
									<!-- <text class="text_13" v-if="item.order_status == 3&&item.toLiveBtn!='已结束'">剩余时间：{{ item.toLiveBtn }}</text> -->
									
									<view class=" flex-row-space-between">
										<view class="text_11">
											订单详情
										</view>
										<view class="bottom-group">
											<text class="text_15">￥</text>
											<text class="text_17 price-font">{{ item.should_pay_money }}</text>
										</view>
									</view>
									
								</view>
							</view>
							<view class="divider"> </view>
							<view class="bottom-group_1 justify-end">
							
								<view class="left-text-wrapper flex-col items-center" id='hide' v-if="item.status_text == '待付款'">
									<text id="hide">取消订单</text>
								</view>
								<view class="right-text-wrapper flex-col items-center" id="pay" v-if="item.status_text == '待付款'">
									<text id="pay">立即支付</text>
								</view>
								<view class="left-text-wrappe1 flex-col items-center" id='toushu' v-if="item.status_text != '待付款'">
									<text id="toushu">投诉</text>
								</view>
								
								<view @click.stop="zaici(item)" class="left-text-wrappe1 flex-col items-center" id='comment' v-if="item.status_text == '已完成'">
									<text id="comment">再次下单</text>
								</view>
								
								<view class="left-text-wrappe1 flex-col items-center" id='comment' v-if="item.status_text == '已完成'">
									<text id="comment">评价订单</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" @confirm='show=false'>
			<view class="slot-content">
				<image :src="this.qrCode" mode="widthFix"></image>
			</view>
		</u-modal>
		<view>
			<Tabbar :value='3' />
		</view>
	</view>
</template>

<script>
	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue'
	// 后台没有数据就引入xer.vue  ，后台接口给出数据就引入index.vue
	// import zNo from '@/components/z-no/index.vue'
	import zNo from '@/components/z-no/xer.vue'
	import qrcode from 'qrcode'
	export default {
		components: {
			tmSkeleton,
			zNo
		},
		data() {
			//0待付款；1待确认；2待服务；3进行中;4完成；5评价；6取消订单
			return {
				list4: [{
					name: '全部',
					status: 99
				}, {
					name: '待付款',
					status: 0,
					// badge: {
					// 	isDot: true
					// }
				}, {
					name: '进行中',
					status: 1,
					
				}, {
					name: '已完成',
					status: 2,
				}, {
					name: '已取消',
					status: -1,
				}],
				loading: true,
				tabsIndex: 0,
				dataList: [],
				total: null,
				qrCode:'',
				show:false,
			};
		},
		onLoad() {
			let active = uni.getStorageSync('tabsIndex');
			if( active ){
				this.tabsIndex = Number(active);
				uni.removeStorageSync('tabsIndex')
			}
			uni.$u.sleep(1000).then(() => {
				this.init();
			})
			
		},
		onPullDownRefresh() {
			let _self = this
			console.log('refresh');
			setTimeout(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
				this.page = 1;
				this.dataList = [];
				this.total = null; 
				this.init();
			}, 1000);
		},
		onReachBottom(){
			if( this.dataList.length === this.total ){
				return;
			}
			this.page++;
			this.init();
		},
		methods: {
			zaici(item){
				uni.navigateTo({
					url:'/bundle/pages/techDeil/techDeil?id='+item.technician_id
				})
			},
			countdown(item) {
				item._interval = setInterval(() => {
					if (item.countTime == 0) {
						item.toLiveBtn='已结束'
						clearInterval(item._interval);
					} else if(item.countTime < 0){
						item.toLiveBtn='已结束'
						clearInterval(item._interval);
					}else {
						item.countTime--;
						let day = parseInt(item.countTime / 60 / 60 / 24)
						let hr = parseInt(item.countTime / 60 / 60 % 24)
						let min = parseInt((item.countTime / 60) % 60);
						let sec = parseInt(item.countTime % 60);
			
						day = day > 9 ? day : '0' + day
						hr = hr > 9 ? hr : '0' + hr
						min = min > 9 ? min : "0" + min;
						sec = sec > 9 ? sec : "0" + sec;
						item.toLiveBtn = `${day!=0?day+'天':''}${day?hr+'时': hr!=0?hr+'时':''}${hr?min+'分': min!=0?min+'分':''}${min?sec+'秒': sec!=0?sec+'秒':''}`;
						if(item.countTime==10*60){
							// #ifdef H5
							const innerAudioContext = uni.createInnerAudioContext();
							innerAudioContext.autoplay = true;
							innerAudioContext.src = '/static/mp3/y781.wav';
							innerAudioContext.onPlay();
							// #endif
							// #ifndef H5
							const bgAudioManager = uni.getBackgroundAudioManager();
							bgAudioManager.src = '/static/mp3/y781.wav';
							// #endif
						}
					}
					this.$forceUpdate()
			 }, 1000)},
			scan(item){
				this.qrCode=''
				qrcode.toDataURL(item.order_sn).then((res) => {
					this.qrCode = res;
					this.show=true
				});
			},
			init() {
				console.log(this.list4[this.tabsIndex].status)
				this.$http.post('api/order/list', {
					status: this.list4[this.tabsIndex].status,
					page: this.page,
					limit:10
				}).then(res => {
					for (var i = 0; i < res.length; i++) {
					this.dataList.push(res[i]);
					}
					
					/* this.dataList.forEach((item=>{
						item.countTime=item.cutdown_time
						this.countdown(item)
					}))
					this.total = total; */
					this.loading = false
				})
			},
			click(e){
				let { index } = e;
				this.tabsIndex = index;
				this.page = 1;
				this.dataList = [];
				this.init();
			},
			onClick(e,item){
				let id = e.target.id;
				if( id === 'hide' ){
					this.hide(item);
					return
				}
				if( id === 'pay' ){
					
				}
				console.log(item.order_sn)
				if( id === 'toushu' ){
					uni.navigateTo({
						url:'/bundle/pages/complaint/complaint?order_id=' + item.order_sn
					})
					return
				}
				if( id === 'comment' ){
					uni.navigateTo({
						url:'/bundle/pages/orderComment/orderComment?order_sn=' + item.order_sn
					})
					return
				}
				uni.navigateTo({
					url:'/bundle/pages/order_details/order_details?order_sn=' + item.order_sn
				})
			},
			hide(item){
				uni.showModal({
					content:'是否确认取消订单？',
					success: (res) => {
						console.log(res)
						if( res.confirm ){
							this.$http.post('api/order/cancelOrder',{
								order_sn: item.order_sn
							}).then(res =>{
								
								
								this.$http.post('api/order/confirmCancel',{
									order_sn: item.order_sn
								}).then(res =>{
									
									uni.showToast({
										icon:'none',
										title:'取消成功'
									});
									
								})
								
								this.tabsIndex = 5;
								this.page = 1;
								this.dataList = [];
								this.init();
							})
						}
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #F6F8FA;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		.no{
			padding-top: 90rpx;
		}
		.group {
			flex: 1 1 auto;
			

			.section_1 {
				padding: 0 32rpx;
				background-color: rgb(255, 255, 255);

				.group_1 {
					padding: 24rpx 0 16rpx;

					.text_1 {
						color: rgb(0, 0, 0);
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_2 {
						margin-left: 48rpx;
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_3 {
						margin-left: 48rpx;
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_4 {
						margin-left: 46rpx;
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_5 {
						margin-left: 48rpx;
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_6 {
						margin-left: 48rpx;
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}
				}

				.section_2 {
					margin-left: 8rpx;
					background-color: rgb(24, 181, 103);
					width: 40rpx;
					height: 8rpx;
				}
			}

			.group_2 {
				padding-bottom: 2412rpx;
				position: relative;

				.section_3 {
					background-image: linear-gradient(180deg,
							rgb(255, 255, 255) 0%,
							rgb(255, 255, 255) 0%,
							rgb(248, 248, 248) 100%,
							rgb(248, 248, 248) 100%);
					height: 48rpx;
				}

				.list {
					position: absolute;
					left: 32rpx;
					right: 32rpx;


					.list-item {
						background-color: rgb(255, 255, 255);
						border-radius: 24rpx;
						margin-bottom: 30rpx;

						.top-section {
							padding: 10rpx 24rpx;
							/* background-image: linear-gradient(180deg,
									rgba(24, 181, 103, 0.2) 0%,
									rgba(24, 181, 103, 0.2) 0.44%,
									rgba(255, 255, 255, 0.2) 100%,
									rgba(255, 255, 255, 0.2) 100%); */
									background-color: #EAFFF0;
							border-radius: 24rpx 24rpx 0px 0px;

							.text_7 {
								color: #31d081;
								font-size: 28rpx;
								font-weight: 500;
								line-height: 40rpx;
								white-space: nowrap;
							}

							.text_9 {
								color: #31d081;
								font-size: 28rpx;
								line-height: 40rpx;
								white-space: nowrap;
							}
						}

						.center-group {
							padding: 0 24rpx 22rpx;

							.image {
								border-radius: 12rpx;
								width: 176rpx;
								height: 154rpx;
							}

							.right-group {
								margin-top: 20rpx;
								margin-left: 10rpx;
								margin-bottom: 2rpx;
								flex: 1 1 auto;

								.text_11 {
									color: rgb(0, 0, 0);
									font-size: 32rpx;
									font-weight: 500;
									line-height: 44rpx;
									white-space: nowrap;
								}

								.text_13 {
									margin-top: 8rpx;
									color: rgb(102, 102, 102);
									font-size: 28rpx;
									line-height: 40rpx;
									white-space: nowrap;
								}

								.bottom-group {
									width: 100%;
									display: flex;
									justify-content: flex-end;
									margin-top: 16rpx;
									white-space: nowrap;

									.text_15 {
										color: rgb(255, 74, 74);
										font-size: 24rpx;
										line-height: 28rpx;
									}

									.text_17 {
										color: rgb(255, 74, 74);
										font-size: 36rpx;
										line-height: 44rpx;
									}
								}
							}
						}

						.divider {
							margin: 0 24rpx;
							background-color: rgba(151, 151, 151, 0.08);
							height: 2rpx;
						}

						.bottom-group_1 {
							padding: 24rpx 0;

							.left-text-wrapper {
								margin-right: 24rpx;
								padding: 8rpx 0 4rpx;
								color: rgb(24, 181, 103);
								font-size: 28rpx;
								line-height: 40rpx;
								white-space: nowrap;
								border-radius: 27rpx;
								width: 168rpx;
								height: 56rpx;
								border: solid 2rpx rgb(24, 181, 103);
							}

							.right-text-wrapper {
								padding: 10rpx 0 6rpx;
								color: rgb(255, 255, 255);
								font-size: 28rpx;
								line-height: 40rpx;
								white-space: nowrap;
								background-image: linear-gradient(113.7deg,
										rgb(53, 219, 160) 0%,
										rgb(53, 219, 160) -13.77%,
										rgb(24, 181, 103) 111.69%,
										rgb(24, 181, 103) 100%);
								border-radius: 27rpx;
								width: 168rpx;
								height: 56rpx;
							}
							
							.left-text-wrappe1 {
								margin-right: 24rpx;
								padding: 8rpx 0 4rpx;
								color: #797979;
								font-size: 28rpx;
								line-height: 40rpx;
								white-space: nowrap;
								border-radius: 27rpx;
								width: 168rpx;
								height: 56rpx;
								border: solid 2rpx #d4d4d4;
							}
						}
					}
				}
			}
		}
	}
	.name-css{
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
